<template>
  <view
    class="tui-tabbar"
    :class="{
      'tui-tabbar-fixed': isFixed,
      'tui-unlined': unlined,
      'tui-backdrop__filter': backdropFilter,
    }"
    :style="{ background: backgroundColor, zIndex: isFixed ? zIndex : 'auto' }"
  >
    <block v-for="(item, index) in tabBar" :key="index">
      <view
        class="tui-tabbar-item"
        :class="{ 'tui-item-hump': item.hump }"
        :style="{ backgroundColor: item.hump && !backdropFilter ? backgroundColor : 'none' }"
        @tap="tabbarSwitch(item)"
      >
        <view class="tui-icon-box" :class="{ 'tui-tabbar-hump': item.hump }">
          <image
            v-if="item.iconPath.includes('http')"
            class="image"
            :src="current == index ? item.selectedIconPath : item.iconPath"
            :class="[item.hump ? '' : 'tui-tabbar-icon']"
          ></image>
          <view
            v-else
            :class="['ant-iconfont', 'icon-' + item.iconPath]"
            :style="{ color: current == index ? selectedColor || globalConfig?.themeColor : color }"
          ></view>
          <view
            :class="[item.isDot ? 'tui-badge-dot' : 'tui-badge']"
            :style="{ color: badgeColor, backgroundColor: badgeBgColor }"
            v-if="item.num"
          >
            {{ item.isDot ? '' : item.num }}
          </view>
        </view>
        <view
          class="tui-text-scale"
          :class="{ 'tui-text-hump': item.hump }"
          :style="{ color: current == index ? selectedColor || globalConfig?.themeColor : color }"
        >
          {{ item.text }}
        </view>
      </view>
    </block>
    <view
      :style="{ background: backgroundColor }"
      :class="{ 'tui-hump-box': hump }"
      v-if="hump && !unlined && !backdropFilter"
    ></view>
  </view>
  <view class="placeholder-view"></view>
</template>

<script setup lang="ts">
  // import { TabbarPageEnum } from '@/enums/pageEnum';
  import { navigateTo, switchTab } from '@/router';
  import { isFunction, isLogin } from '@/utils/is';
  import { propTypes } from '@/utils/propTypes';
  import { computed } from 'vue';
  import { type ITabbarItem, useAppStoreWithOut } from '@/store/modules/app';
  import { navigateToMiniProgram } from '@/utils/dynamicConfig';
  import { storeToRefs } from 'pinia';
  import { DynamicTabbarPagesEnum, TabbarPageEnum } from '@/enums/pageEnum';

  const useApp = useAppStoreWithOut();
  const { tabbarList, globalConfig } = storeToRefs(useApp);
  const tabBar = computed(() => {
    return tabbarList.value;
  });

  const emit = defineEmits(['change']);

  defineProps({
    /** 当前索引 */
    current: propTypes.number.def(0),
    /** 字体颜色 */
    color: propTypes.string.def('#808080'),
    /** 字体选中颜色 .def('#FF9900') */
    selectedColor: propTypes.string,
    /** 背景颜色 */
    backgroundColor: propTypes.string.def('#FFFFFF'),
    /** 是否需要中间凸起按钮 */
    hump: propTypes.bool.def(false),
    /** 固定在底部 */
    isFixed: propTypes.bool.def(true),
    /** 角标字体颜色 */
    badgeColor: propTypes.string.def('#fff'),
    /** 角标背景颜色 */
    badgeBgColor: propTypes.string.def('#F74D54'),
    unlined: propTypes.bool.def(false),
    /** 是否开启高斯模糊效果[仅在支持的浏览器有效果] */
    backdropFilter: propTypes.bool.def(false),
    zIndex: propTypes.number.def(998),
  });

  const tabbarSwitch = (item: ITabbarItem) => {
    const { pagePath, verify, to, index, miniprogramOptions } = item;
    emit('change', index);
    if (miniprogramOptions) {
      const { appId, path } = miniprogramOptions;
      return navigateToMiniProgram(appId, path);
    }

    if (isFunction(to)) {
      to?.();
    } else {
      verify ? isLogin(() => toPath(item)) : toPath(item);
    }
  };

  const tabbarRoute = [
    DynamicTabbarPagesEnum.BASE_ACTIVITY,
    DynamicTabbarPagesEnum.BASE_CONTACTSMAP,
    DynamicTabbarPagesEnum.BASE_MEMBER,
    DynamicTabbarPagesEnum.SUPPLYDEMANDSQUARE,
    TabbarPageEnum.BASE_HOME,
    TabbarPageEnum.BASE_MINE
  ];
  const toPath = (item: ITabbarItem) => {
    const { pagePath, component } = item;
    if (tabbarRoute.includes(component) && pagePath) {
      switchTab(pagePath as any);
    } else {
      navigateTo({ name: component as any });
    }
  };
</script>

<style scoped lang="scss">
  .placeholder-view {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .tui-tabbar,
  .placeholder-view {
    width: 100%;
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
  }

  .tui-backdrop__filter {
    /* Safari for macOS & iOS */
    -webkit-backdrop-filter: blur(15px);
    /* Google Chrome */
    backdrop-filter: blur(15px);
  }

  .tui-tabbar-fixed {
    position: fixed;
    left: 0;
    bottom: 0;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    box-sizing: content-box !important;
  }

  .tui-tabbar::before {
    content: ' ';
    width: 100%;
    border-top: 1px solid #b2b2b2;
    position: absolute;
    top: 0;
    left: 0;
    transform: scaleY(0.5) translateZ(0);
    transform-origin: 0 0;
    display: block;
    z-index: 3;
  }

  .tui-tabbar-item {
    height: 100%;
    flex: 1;
    display: flex;
    text-align: center;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    padding: 10rpx 0;
    box-sizing: border-box;
    z-index: 5;
  }

  .tui-icon-box {
    position: relative;

    .ant-icon {
      font-size: 42rpx;
    }
  }

  .tui-item-hump {
    height: 98rpx;
  }

  .tui-tabbar-icon {
    width: 52rpx;
    height: 52rpx;
    display: block;
  }

  .tui-hump-box {
    width: 120rpx;
    height: 120rpx;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -50rpx;
    border-radius: 50%;
    z-index: 4;
  }

  .tui-hump-box::after {
    content: ' ';
    height: 200%;
    width: 200%;
    border: 1px solid #b2b2b2;
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(0.5) translateZ(0);
    transform-origin: 0 0;
    border-radius: 120rpx;
    box-sizing: border-box;
    display: block;
  }

  .tui-unlined::after {
    height: 0 !important;
  }

  .tui-tabbar-hump {
    width: 100rpx;
    height: 100rpx;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%) rotate(0deg);
    transform: translateX(-50%) rotate(0deg);
    top: -40rpx;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
    border-radius: 50%;
    z-index: 5;
  }

  .tui-tabbar-hump .image {
    width: 100rpx;
    height: 100rpx;
    display: block;
  }

  .tui-hump-active {
    -webkit-transform: translateX(-50%) rotate(135deg);
    transform: translateX(-50%) rotate(135deg);
  }

  .tui-text-scale {
    font-weight: bold;
    transform: scale(0.8);
    font-size: 26rpx;
    line-height: 28rpx;
    transform-origin: center 100%;
  }

  .tui-text-hump {
    position: absolute;
    left: 50%;
    bottom: 10rpx;
    transform: scale(0.8) translateX(-50%);
    transform-origin: 0 100%;
  }

  .tui-badge {
    position: absolute;
    font-size: 24rpx;
    height: 32rpx;
    min-width: 20rpx;
    padding: 0 6rpx;
    border-radius: 40rpx;
    right: 0;
    top: -5rpx;
    transform: translateX(70%);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .tui-badge-dot {
    position: absolute;
    height: 16rpx;
    width: 16rpx;
    border-radius: 50%;
    right: -4rpx;
    top: -4rpx;
  }
</style>
